<template>
  <div class="flex">
    <el-row class="w-full" :gutter="20">
      <el-col :span="16">
        <el-card shadow="never">
          <template #header
            ><div class="card-header">
              <span>公告列表</span>
            </div></template
          >
          <el-table height="180" :data="data" :show-header="false" @row-click="showDetail">
            <el-table-column prop="title" show-overflow-tooltip />
            <el-table-column prop="createTime" width="180" :formatter="dateFormatter" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <template #header
            ><div class="card-header">
              <span>最新公告：{{ lastOne.title || ' ' }}</span>
            </div></template
          >
          <div class="card-content">
            <div class="content-text" v-html="lastOne.content" v-if="lastOne.content"></div>
            <div class="content-text no-message" v-else>暂无数据</div>
            <div class="footer" @click="showDetail(lastOne)" v-if="lastOne.content"> 详情>> </div>
          </div>
        </el-card>
      </el-col>
      
    </el-row>
  </div>
  <Dialog :title="title" v-model="visible" width="80%" :scroll="true" max-height="10" align-center>
    <!-- append-to-body -->
    <div v-html="content"></div>
  </Dialog>
</template>
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
})
const lastOne: any = computed(() => {
  return props.data[0] || {}
})
const visible = ref(false)
const content = ref()
const title = ref('')
const showDetail = (val) => {
  title.value = val.title
  content.value = val.content
  visible.value = true
}
</script>

<style lang="scss" scoped>
.card-content {
  height: 180px;
  display: flex;
  flex-flow: column;
  word-wrap: break-word;
  .no-message {
    text-align: center;
    line-height: 180px;
  }
  .content-text {
    height: 160px;
    overflow: hidden;
  }
  .footer {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 20px;
    text-align: right;
    color: var(--el-color-primary);
    cursor: pointer;
  }
}
:deep(.el-table__row) {
  cursor: pointer;
}
</style>
